<% content_for "modal_for_#{attribute}" do %>

  <% new_page_title = t('typus.resources.add.title', resource: attribute.titleize.singularize) %>

  <div id="modal-from-dom-<%= attribute_id %>" class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
          <h4 class="modal-title"><%= new_page_title %></h4>
        </div>

        <div class="modal-body"></div>

        <div class="modal-footer">
          <% html_options = { id: 'modal-form-submit', class: 'btn btn-primary' } %>
          <%= link_to t('typus.buttons.save'), { anchor: '', _continue: true }, html_options %>
        </div>

        <script>
          $('#modal-form-submit').click(function(e){
            e.preventDefault();

            var object = $('#<%= "new_#{attribute.downcase}" %>');
            var data = object.serialize();
            var url = object.attr('action');

            console.log(url);

            $.ajax({
              url: url,
              type: 'POST',
              data: data,
              success: function(data) {
                // $('.modal-body').html(data);
                // var option = new Option($("#_label").attr("value"), $("#_id").attr("value"), true, true);
                // parent.$("#<%= attribute_id %>").prepend(option);
                $("#modal-from-dom-<%= attribute_id %>").modal('hide');
              },
              error: function(request, status, error) {
                $('.modal-body').html(request.responseText);
              }
            })

            });
        </script>

      </div>
    </div>
  </div>

<% end %>
